﻿
<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/MarkerList/examples/pagination.html -->
    <!--<base href="http://webapi.amap.com/ui/1.0/ui/misc/MarkerList/examples/" />-->
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>搜索+分页</title>
    <link rel="stylesheet" type="text/css" href="../css/index.css">
    <link rel="stylesheet" type="text/css" href="http://a.amap.com/amap-ui/static/1.0/ui/misc/MarkerList/examples/pagination.css">

    <style>
        #keywords {
            position: absolute;
            right: 100px;
            top: 7px;
            line-height: 200%;
            padding: 0 5px;
            font-size: 13px;
            border-radius: 3px;
            border: 1px solid #ccc;
            width: 150px;
        }

        #equstate {
            position: absolute;
            right: 320px;
            top: 7px;
            line-height: 200%;
            padding: 0 5px;
            font-size: 13px;
            border-radius: 3px;
            border: 1px solid #ccc;
            width: 150px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div id="outer-box">
        <div id="container" tabindex="0"></div>
        <select id="equstate" class="form-control">
            <option value="1" selected>设备状态</option>
            <option value="2">安装状态</option>
        </select>
        <input type="text" id="keywords" value="" />
        <!--<div id="panel" class="scrollbar1">
            <ul id="pagination-demo" class="pagination-sm"></ul>
            <ul id="myList"></ul>
        </div>-->
    </div>
    <script type="text/javascript" src="http://webapi.amap.com/ui/1.0/plug/ext/jquery-1.12.4.min.js?v=1.0.11"></script>
    <script type="text/javascript" src="http://a.amap.com/amap-ui/static/1.0/ui/misc/MarkerList/examples/jquery.twbsPagination.min.js?v=1.0.11"></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.1&key=41f8e244e4aef00fde3cd0c8abdc57b5&plugin=AMap.DistrictSearch"></script>
    <!-- UI组件库 1.0 -->
    <script src="http://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

    <script type="text/javascript">

        //创建地图
        var zoomlistener, map = new AMap.Map('container', {
            resizeEnable: true,
            zoom: 10
        });

        var zoom = map.getZoom();
        //var inited = true;
        //var count = 0;

        var shapeClses = [
                'WaterDrop',
                'SquarePin',
                'ShieldPin',
                'FivePointsStar',
                'TriangleFlagPin',
                'RectangleFlagPin'
        ];

        AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker', 'overlay/SimpleInfoWindow', 'overlay/SvgMarker'],
            function (MarkerList, SimpleMarker, SimpleInfoWindow, SvgMarker) {

                //即jQuery/Zepto
                var $ = MarkerList.utils.$;

                var defaultIconStyle = function (index, state) {

                    if (state == 0) {
                        return 'gray';
                    }
                    if (state == 1) {
                        return 'green';
                    }
                    if (state == -1) {
                        //return 'red-' + (index + 1);
                        return 'red';
                    }

                }, //默认的图标样式
                    hoverIconStyle = function (index) {
                        return 'blue-' + (index + 1);
                    }, //鼠标hover时的样式
                    selectedIconStyle = function (index) {
                        return 'blue-' + (index + 1);
                    } //选中时的图标样式
                ;



                var markerList = new MarkerList({
                    map: map,
                    //ListElement对应的父节点或者ID
                    //listContainer: "myList", //document.getElementById("myList"),
                    //选中后显示

                    //从数据中读取位置, 返回lngLat
                    getPosition: function (item) {
                        return item.location;
                    },
                    //数据ID，如果不提供，默认使用数组索引，即index
                    getDataId: function (item, index) {

                        return item.id;
                    },
                    getInfoWindow: function (data, context, recycledInfoWindow) {


                        //var content = data.CustomDetailAddress + "<br/><a href='newlogin.html?&ID='2' target='view_window'>详细信息</a>";
                        var content = data.CustomDetailAddress + "<br/><a class='menuItem' href='../MFG/ShengchanIndex.html?ID=" + data.ID + "' target='view_window'>详细信息</a>";

                        if (recycledInfoWindow) {

                            recycledInfoWindow.setInfoTitle(data.CustomName);
                            recycledInfoWindow.setInfoBody(content);

                            return recycledInfoWindow;
                        }

                        return new SimpleInfoWindow({
                            infoTitle: data.CustomName,
                            infoBody: content,
                            offset: new AMap.Pixel(0, -32)
                        });
                    },
                    //构造marker用的options对象, content和title支持模板，也可以是函数，返回marker实例，或者返回options对象
                    getMarker: function (data, context, recycledMarker) {

                        if (context.data.CustomeState != "") {
                            return new SimpleMarker({
                                //iconTheme: 'numv1',
                                iconTheme: 'fresh',
                                containerClassNames: 'my-marker',
                                iconStyle: defaultIconStyle(context.index, context.data.CustomeState),
                            });
                        }
                        if (context.data.InstallState == 0) {  //未安装

                            var shape = new SvgMarker.Shape[shapeClses[3]]({
                                fillColor: 'gray',
                                strokeColor: 'gray',
                                strokeWidth: 1,
                                width: 50
                            })

                            return new SvgMarker(shape, {
                                showPositionPoint: true,
                                containerClassNames: 'shape-' + 'FivePointStar'
                            });
                        }

                        if (context.data.InstallState == 1) {  //正在安装

                            var shape = new SvgMarker.Shape[shapeClses[3]]({
                                fillColor: 'yellow',
                                strokeColor: 'gray',
                                strokeWidth: 1,
                                width: 50
                            })

                            return new SvgMarker(shape, {
                                showPositionPoint: true,
                                containerClassNames: 'shape-' + 'FivePointStar'
                            });
                        }


                        if (context.data.InstallState == 2) {  //已安装

                            var shape = new SvgMarker.Shape[shapeClses[3]]({
                                fillColor: 'green',
                                strokeColor: 'gray',
                                strokeWidth: 1,
                                width: 50
                            })

                            return new SvgMarker(shape, {
                                showPositionPoint: true,
                                containerClassNames: 'shape-' + 'FivePointStar'
                            });
                        }
                    },

                    //marker上监听的事件
                    markerEvents: ['click', 'mouseover', 'mouseout'],
                    //makeSelectedEvents:false,
                    selectedClassNames: 'selected',
                    autoSetFitView: true
                });

                window.markerList = markerList;



                InitData(zoom);


                $('#keywords').on('keypress', function (e) {
                    if (e.which === 13) {

                        InitData(zoom);
                    }
                });


            });


        window.onload = function () {
            document.getElementById('equstate').addEventListener('change', function () {
                InitData(zoom);
            }, false);
        }

        function InitData(zoom) {
            //alert(zoom);

            $.ajax({
                url: "Login.ashx",
                data: {
                    Action: "GetGISInfo",
                    keyword: $('#keywords').val(),
                    state: $('#equstate').val(),
                    zoom: zoom
                    //pageIndex: page,
                    //pageSize: 5
                },
                type: "post",
                async: false,
                datatype: "json",
                success: function (data) {
                    var dataall = JSON.parse(data);
                    if (dataall.pois != null) {
                        $.each(dataall.pois, function (i) {
                            var subdata = dataall.pois[i];
                            subdata.location = new AMap.LngLat(subdata.location[0].lng, subdata.location[0].lat);
                        });
                        console.log(dataall);
                        //AMap.event.removeListener(zoomlistener);//移除事件，以绑定时返回的对象作为参数
                        markerList.render(dataall.pois);

                        //map.setZoom(zoom);

                    }
                },
                error: function (msg) {
                    alert('返回数据出错!');
                }
            });
        }

        zoomlistener = AMap.event.addListener(map, 'zoomend', function () {
            zoom = map.getZoom();
            //alert(zoom);
            InitData(zoom);
        });


        //鼠标点击marker弹出自定义的信息窗体
        //AMap.event.addListener(marker, 'click', function () {
        //    alert(111);
        //    infoWindow.open(map, marker.getPosition());
        //});
    </script>
</body>

</html>